أساس الويب المكاني: نظرة عميقة على مرتكزات WebXR الدائمة

تخيل وضع قطعة أثاث افتراضية في غرفة المعيشة الخاصة بك باستخدام هاتفك الذكي. يمكنك تعديلها والمشي حولها ورؤية كيف تناسبها. الآن، تخيل إغلاق المتصفح، وعندما تعود غدًا، تكون قطعة الأثاث الافتراضية في مكانها بالضبط. يمكن لشريكك أيضًا فتح نفس صفحة الويب على أجهزتهم ورؤية نفس قطعة الأثاث في نفس البقعة. هذه هي سحر الديمومة في الواقع المعزز، ولم تعد المجال الحصري للتطبيقات الأصلية. مرحبًا بك في عالم مرتكزات WebXR الدائمة.

لسنوات، كان الواقع المعزز المستند إلى الويب (WebAR) تجربة رائعة ولكنها عابرة في الغالب. ستظهر الكائنات الرقمية، ولكن في اللحظة التي تنتهي فيها الجلسة، تختفي في الأثير الرقمي. هذا قيد WebAR على حملات تسويقية قصيرة العمر أو عروض توضيحية بسيطة. تعمل المرتكزات الدائمة على تغيير هذا النموذج تمامًا. إنها تقنية أساسية تسمح 'بحفظ' المحتوى الرقمي في العالم الحقيقي، مما يخلق تجارب هادفة ومتعددة الجلسات يمكن الوصول إليها لأي شخص لديه متصفح ويب.

هذا الدليل الشامل مخصص للمطورين ومديري المنتجات وعشاق التكنولوجيا في جميع أنحاء العالم. سنستكشف ماهية المرتكزات الدائمة، وكيف تعمل، وكيفية تنفيذها باستخدام WebXR Device API، والتطبيقات المذهلة التي تفتحها لويب غامر عالمي حقًا.

ما هي مرتكزات WebXR بالضبط؟

قبل الغوص في الديمومة، دعنا نوضح ما هو المرتكز في سياق XR (الواقع الممتد). المرتكز هو نقطة واتجاه محدد وثابت في العالم الحقيقي يمكن لنظام تتبع الجهاز مراقبته. فكر فيه على أنه دبوس رقمي تضعه في موقع في العالم الحقيقي.

يعمل جهازك المزود بتقنية AR على تحليل محيطه باستمرار باستخدام الكاميرات وأجهزة الاستشعار، وهي عملية تسمى غالبًا SLAM (التوطين والتعيين المتزامن). يحدد نقاط ميزة فريدة - زوايا الأثاث، الأنماط الموجودة على الحائط، القوام الموجود على الأرض - لفهم موقعه واتجاهه الخاص داخل مساحة ما. المرتكز هو نقطة مرتبطة بهذا الفهم للعالم. أثناء تحركك، يقوم الجهاز باستمرار بتحديث موضع كائناتك الافتراضية بالنسبة إلى المرتكز، مما يضمن ظهورها ثابتة وثابتة في العالم الحقيقي.

مرتكزات مؤقتة مقابل دائمة: الفرق الرئيسي

التمييز بين أنواع المرتكزات أمر بالغ الأهمية لفهم قوتها:

• مرتكزات مؤقتة (مستندة إلى الجلسة): هذه هي المرتكزات القياسية المتوفرة في WebXR منذ بعض الوقت. يتم إنشاؤها وتوجد فقط لمدة جلسة XR واحدة. عندما يغلق المستخدم علامة التبويب أو يتنقل بعيدًا، يضيع المرتكز وإشارته إلى العالم الحقيقي إلى الأبد. إنها مثالية لتجارب اللحظة، مثل لعب لعبة سريعة على منضدة.
• مرتكزات دائمة (عبر الجلسات): هذا هو مغير قواعد اللعبة. المرتكز الدائم هو مرتكز يمكن للمتصفح حفظه واستعادته في جلسة مستقبلية. يتذكر الجهاز موقع المرتكز بالنسبة إلى العالم الحقيقي. عندما تبدأ جلسة AR جديدة في نفس المساحة المادية، يمكنك أن تطلب من المتصفح 'تحميل' هذا المرتكز، وستظهر المحتويات الافتراضية الخاصة بك تمامًا في المكان الذي تركتها فيه.

قياس: المرتكز المؤقت يشبه الكتابة على لوحة بيضاء يتم مسحها في نهاية اليوم. المرتكز الدائم يشبه نقش تلك المعلومات على لافتة دائمة مثبتة على الحائط.

'مشكلة الديمومة' ولماذا تهم الويب العالمي

لقد كان الافتقار إلى الديمومة حاجزًا أساسيًا أمام إنشاء تطبيقات AR مفيدة وجذابة للغاية. بدون ذلك، تكون كل تجربة صفقة 'بطلقة واحدة'، وتُعاد ضبطها إلى الصفر في كل مرة. يمنع هذا القيد تطوير التطبيقات التي تبني قيمة بمرور الوقت.

ضع في اعتبارك هذه السيناريوهات التي كانت مستحيلة في السابق على الويب:

• التصميم التعاوني: يريد فريق معماري في طوكيو وعميل في برلين مراجعة نموذج ثلاثي الأبعاد على طاولة غرفة اجتماعات فعلية. بدون الديمومة، سيحتاجون إلى إعادة محاذاة النموذج يدويًا في كل مرة يفتحون فيها التطبيق.
• التدريب الصناعي: يحتاج فني إلى ترك تعليمات افتراضية على قطعة معقدة من الآلات لعمال التحول التالي. بدون الديمومة، ستختفي تلك التعليمات عندما تنتهي جلسة الفني الأول.
• المساحات الشخصية: يريد المستخدم تزيين منزله بالفن الافتراضي. سيفقدون جميع أعمالهم الفنية الموضوعة بعناية في كل مرة يغلقون فيها المتصفح.

تعمل المرتكزات الدائمة على حل هذه المشكلة من خلال إنشاء جسر بين الجلسات الرقمية، مرتكزة في العالم المادي. يمكّن هذا فئة جديدة من التطبيقات التي تعتمد على السياق والتعاون والمستمرة، وتشكل اللبنات الأساسية لـ 'الويب المكاني' أو 'ميتافيرس' - عالم حيث يتم دمج المعلومات الرقمية بسلاسة مع بيئتنا المادية.

كيف تعمل المرتكزات الدائمة: نظرة تحت الغطاء

تعد التكنولوجيا الكامنة وراء المرتكزات الدائمة أعجوبة في رؤية الكمبيوتر والحوسبة المكانية. بينما تقوم واجهة برمجة التطبيقات بتجريد الكثير من التعقيد، فإن فهم المفاهيم الأساسية مفيد للمطورين.

1. رسم خريطة للعالم: عندما تبدأ جلسة AR، يبدأ جهازك في إنشاء خريطة لمحيطه. إنها ليست خريطة فوتوغرافية، ولكنها سحابة من نقاط الميزة الفريدة. تمثل هذه الخريطة تمثيلاً رياضيًا لهندسة الفضاء.
2. إنشاء مرتكز: عندما تطلب إنشاء مرتكز في موضع معين، يقوم النظام بربط إحداثيات هذا المرتكز بخريطة نقطة الميزة الأساسية.
3. إنشاء UUID: بالنسبة للمرتكز الدائم، يقوم النظام بإنشاء معرف فريد عالمي (UUID) - سلسلة طويلة وفريدة - تعمل كمعرف دائم للمرتكز. يتم إعطاء UUID لتطبيق الويب الخاص بك.
4. حفظ UUID: تقع على عاتق تطبيقك مسؤولية حفظ هذا UUID. يمكنك تخزينه في localStorage الخاص بالمتصفح لتجربة مستخدم واحد وجهاز واحد، أو يمكنك إرساله إلى خادم لمشاركته مع مستخدمين آخرين أو الوصول إليه من أجهزة أخرى.
5. إعادة التوطين: عندما تبدأ جلسة جديدة في نفس الموقع المادي، يبدأ الجهاز مرة أخرى في رسم خريطة لبيئته. يقارن الخريطة الجديدة بالخرائط المحفوظة مسبقًا. إذا وجد تطابقًا، فإنه 'يعيد تحديد موقع' نفسه بنجاح.
6. استعادة المرتكز: يوفر تطبيقك UUID (s) المحفوظة إلى WebXR API. إذا نجح الجهاز في إعادة تحديد موقعه في المنطقة التي تم فيها إنشاء هذا المرتكز، فيمكن للنظام تحديد الموضع الحالي للمرتكز واستعادته لتطبيقك لاستخدامه.

ملاحظة حول الخصوصية: تم تصميم هذه العملية مع وضع الخصوصية في الاعتبار. بيانات نقاط الميزة التي يخزنها الجهاز هي بيانات مجردة، وليست صورًا أو مقاطع فيديو قابلة للقراءة لبيئة المستخدم. تتطلب مواصفات WebXR إذنًا صريحًا من المستخدم لاستخدام ميزات مثل المرتكزات، مما يضمن أن المستخدم يتحكم دائمًا.

تنفيذ المرتكزات الدائمة: دليل عملي للمطورين

لنكن عمليين. يتضمن تنفيذ المرتكزات الدائمة بضع خطوات رئيسية ضمن دورة حياة WebXR Device API. تستخدم الأمثلة التالية JavaScript وتفترض الإلمام الأساسي بإعداد جلسة WebXR.

1. اكتشاف الميزات وطلب الجلسة

أولاً، يجب عليك طلب ميزة `anchors` عند إنشاء جلسة XR الخاصة بك. هذه ميزة مطلوبة، مما يعني أن الجلسة لن تبدأ إذا لم يدعمها المتصفح.

            
async function activateXR() {
  // Check for WebXR support
  if (!navigator.xr) {
    console.error("WebXR is not available.");
    return;
  }

  // Request an immersive-ar session with the 'anchors' feature
  try {
    const session = await navigator.xr.requestSession('immersive-ar', {
      requiredFeatures: ['anchors']
    });
    
    // ... session setup ...
  } catch (error) {
    console.error("Failed to start AR session:", error);
  }
}

            

              
                Copy
              
            
          

2. إنشاء مرتكز جديد وتخزينه

بمجرد تشغيل جلستك، يمكنك إنشاء مرتكز. يتم ذلك عادةً استجابةً لإجراء المستخدم، مثل النقر على الشاشة. ستجري اختبارًا للاصطدام للعثور على سطح في العالم الحقيقي ثم تنشئ مرتكزًا في هذا الموضع.

            
// Inside your render loop or event handler
async function onSelect(event) {
  const frame = event.frame;
  const session = frame.session;

  // Create a hit test source
  const hitTestSource = await session.requestHitTestSource({ space: event.inputSource.targetRaySpace });
  const hitTestResults = frame.getHitTestResults(hitTestSource);

  if (hitTestResults.length > 0) {
    const hitPose = hitTestResults[0].getPose(xrReferenceSpace);

    try {
      // Create the anchor at the hit-tested position
      const anchor = await frame.createAnchor(hitPose.transform);
      console.log("Anchor created successfully.");

      // THE CRITICAL STEP: Store the anchor's UUID
      // The anchor object has a UUID if persistence is supported.
      if (anchor.anchorUUID) {
        saveAnchorUUID(anchor.anchorUUID);
      }

    } catch (error) {
      console.error("Could not create anchor:", error);
    }
  }
}

// Example function to save the UUID to localStorage
function saveAnchorUUID(uuid) {
  let savedAnchors = JSON.parse(localStorage.getItem('my-ar-app-anchors') || '[]');
  if (!savedAnchors.includes(uuid)) {
    savedAnchors.push(uuid);
    localStorage.setItem('my-ar-app-anchors', JSON.stringify(savedAnchors));
    console.log(`Saved anchor UUID: ${uuid}`);
  }
}

            

              
                Copy
              
            
          

3. استعادة المرتكزات في جلسة جديدة

عند بدء جلسة جديدة، مهمتك الأولى هي تحميل UUID المحفوظة وطلب من النظام استعادتها. سيحاول المتصفح بعد ذلك العثور عليها في البيئة.

            
// When your session starts
async function onSessionStarted(session) {
  // ... other setup ...

  // Restore previously saved anchors
  await restoreSavedAnchors(session);
}

async function restoreSavedAnchors(session) {
  const savedAnchors = JSON.parse(localStorage.getItem('my-ar-app-anchors') || '[]');

  if (savedAnchors.length === 0) {
    console.log("No anchors to restore.");
    return;
  }

  console.log(`Attempting to restore ${savedAnchors.length} anchors...`);

  try {
    // The restoreAnchor method returns a promise that resolves when the anchor is found
    const restoredAnchors = await Promise.all(
      savedAnchors.map(uuid => session.restoreAnchor(uuid))
    );

    restoredAnchors.forEach(anchor => {
      if (anchor) {
        console.log(`Successfully restored anchor with UUID: ${anchor.anchorUUID}`);
        // Now you can attach your 3D model to this restored anchor
        add3DObjectToAnchor(anchor);
      }
    });

  } catch (error) {
    console.error("An error occurred while restoring anchors:", error);
  }
}

            

              
                Copy
              
            
          

4. إدارة المرتكزات وحذفها

يجب أن يتعامل تطبيقك أيضًا مع حذف المرتكزات، سواء من المشهد أو من التخزين الدائم. خاصية trackedAnchors الخاصة بالجلسة هي Set تحتوي على جميع المرتكزات (التي تم إنشاؤها حديثًا والمستعادة) التي يتم تتبعها حاليًا.

            
// To delete an anchor
function deleteAnchor(anchor) {
  // Remove from persistent storage
  const uuid = anchor.anchorUUID;
  let savedAnchors = JSON.parse(localStorage.getItem('my-ar-app-anchors') || '[]');
  const index = savedAnchors.indexOf(uuid);
  if (index > -1) {
    savedAnchors.splice(index, 1);
    localStorage.setItem('my-ar-app-anchors', JSON.stringify(savedAnchors));
  }

  // Tell the system to stop tracking it
  anchor.delete();
  console.log(`Deleted anchor with UUID: ${uuid}`);
}

// You can iterate through all tracked anchors in your render loop
function render(time, frame) {
  for (const anchor of frame.session.trackedAnchors) {
    // Get the anchor's pose and update your 3D object's position
    const anchorPose = frame.getPose(anchor.anchorSpace, xrReferenceSpace);
    if (anchorPose) {
      // Update 3D model matrix
    }
  }
}

            

              
                Copy
              
            
          

حالات الاستخدام والتطبيقات العالمية التي تم فتحها بواسطة الديمومة

تعمل المرتكزات الدائمة على رفع مستوى WebAR من مجرد حداثة إلى أداة مساعدة، مما يفتح تطبيقات قوية عبر صناعات لا حصر لها في جميع أنحاء العالم.

التجارة الإلكترونية والبيع بالتجزئة

يمكن للعلامات التجارية العالمية أن تقدم تجارب 'جرب قبل أن تشتري' والتي تدوم. يمكن للمستخدم في البرازيل وضع تلفزيون افتراضي من علامة تجارية للإلكترونيات الكورية على الحائط. يمكنهم إغلاق المتصفح ومناقشة الأمر مع عائلتهم وإعادة فتحه لاحقًا لرؤيته في نفس المكان بالضبط. يؤدي هذا إلى إنشاء تجربة تسوق أكثر إقناعًا وفائدة.

الحلول الصناعية والمؤسسية

يمكن لمهندس صيانة في مصنع سيارات ألماني استخدام تطبيق ويب لوضع علامات رقمية دائمة على جهاز، مما يشير إلى النقاط التي تتطلب خدمة. يمكن لفني في الوردية التالية، ربما متعاقد من دولة أخرى يتحدث لغة مختلفة، فتح نفس رابط الويب على جهازه اللوحي ورؤية تعليقات AR متوافقة تمامًا مع المعدات الواقعية، مما يغلق فجوات الاتصال ويحسن الكفاءة.

الهندسة المعمارية والهندسة والبناء (AEC)

يمكن لشركة معمارية في الولايات المتحدة مشاركة رابط مع عميل في دبي. يمكن للعميل وضع نموذج افتراضي بمقياس 1:1 للمبنى المقترح في موقع البناء الفعلي. سيستمر النموذج، مما يسمح لهم بالتجول فيه وتقديم الملاحظات على مدار عدة أيام أثناء مراجعة الخطط.

الملاحة وتحديد المواقع

يمكن للأماكن الكبيرة والمعقدة مثل المطارات الدولية أو أرضيات المعارض التجارية أو الجامعات أن تنشر AR لتحديد المواقع بشكل دائم. يمكن للزوار تحميل صفحة ويب ورؤية مسار افتراضي دائم يرشدهم إلى بوابتهم أو كشكهم أو قاعة المحاضرات. هذا أكثر سهولة من محاولة اتباع خريطة ثنائية الأبعاد.

التعليم والثقافة

يمكن للمتاحف إنشاء معارض AR دائمة. يمكن للزائر أن يوجه هاتفه إلى هيكل عظمي للديناصورات ويرى طبقة دائمة من المعلومات والرسوم المتحركة والشروحات التي تظل في مكانها أثناء التجول حوله. يمكن للطلاب في الفصل الدراسي تشريح ضفدع افتراضي بشكل تعاوني على مكاتبهم، مع استمرار النموذج طوال مدة الدرس.

الفن والترفيه

يمكن للفنانين إنشاء منشآت فنية رقمية عامة مرتبطة بمواقع محددة في العالم الحقيقي. يمكن للمستخدمين زيارة حديقة أو ساحة مدينة، وفتح عنوان URL، ورؤية تمثال افتراضي دائم. يمكن أن تحتوي الألعاب متعددة اللاعبين على عناصر دائمة يمكن للاعبين من جميع أنحاء العالم التفاعل معها في مساحة مادية مشتركة.

التحديات والاعتبارات الخاصة بجمهور المطورين العالميين

في حين أنها قوية بشكل لا يصدق، يأتي التطوير باستخدام المرتكزات الدائمة مع مجموعة من التحديات التي يجب على المطورين مراعاتها، خاصة عند البناء لجمهور عالمي.

• دعم المتصفح والجهاز: وحدة WebXR Anchors هي معيار جديد نسبيًا. الدعم ليس عالميًا بعد. في الوقت الحالي، يتوفر بشكل أساسي في Chrome لنظام Android على الأجهزة المتوافقة مع ARCore. من الضروري التحقق من دعم الميزات وتنفيذ تدهور رشيق للمستخدمين على المتصفحات أو الأجهزة غير المدعومة (مثل iOS). يجب أن تظل تجربتك وظيفية، وربما تعود إلى وضع عارض ثلاثي الأبعاد.
• الظروف البيئية: تعتمد تقنية SLAM الأساسية على ميزات مرئية مستقرة. يمكن أن تفشل إعادة التوطين إذا تغيرت البيئة بشكل كبير بين الجلسات. يمكن أن تمنع التغييرات الجذرية في الإضاءة (النهار مقابل الليل) أو الأثاث المتحرك أو عدم وجود ميزات مرئية مميزة (جدار أبيض عادي) من استعادة المرتكز. يجب تصميم التطبيقات للتعامل مع حالات فشل الاستعادة هذه بشكل رشيق.
• مشاركة الأجهزة والأنظمة الأساسية المتعددة: يضمن معيار WebXR إمكانية استعادة المرتكز على نفس الجهاز. بحد ذاته، لا يحل مشكلة مشاركة موقع المرتكز بين الأجهزة المختلفة (مثل هاتف Android وسماعة رأس AR مستقبلية) أو الأنظمة الأساسية (WebXR وتطبيق ARKit أصلي لنظام iOS). يتطلب حل مشكلة 'متعدد المستخدمين ومتعدد الأجهزة' طبقة إضافية من التكنولوجيا، والتي تسمى غالبًا خدمة AR Cloud، والتي يمكنها دمج ومحاذاة الخرائط المكانية من مصادر مختلفة.
• الخصوصية وموافقة المستخدم: كمطورين، تقع على عاتقنا مسؤولية أن نكون شفافين مع المستخدمين. نظرًا لأن AR الدائم يتضمن حفظ بيانات حول البيئة المادية للمستخدم، فمن الضروري شرح سبب حاجتك إلى إذن `anchors` وكيف سيتم استخدام البيانات بوضوح. ثقة المستخدم أمر بالغ الأهمية لاعتماد هذه التكنولوجيا.

المستقبل دائم: ما هو التالي للويب الغامر؟

تعتبر WebXR Persistent Anchors خطوة كبيرة إلى الأمام، لكنها مجرد البداية. يتجه تطور الويب الغامر نحو مستقبل أكثر اتصالًا وواعيًا بالسياق.

نشهد ظهور WebXR Geospatial API، والذي يسمح بربط المرتكزات بالإحداثيات الجغرافية الواقعية (خط العرض وخط الطول والارتفاع). سيمكّن هذا من تجارب AR واسعة النطاق على مستوى المدينة، وكلها مبنية على معايير الويب المفتوحة.

علاوة على ذلك، سيوفر تطوير منصات AR Cloud البنية التحتية الخلفية اللازمة لتجارب AR المشتركة والدائمة وعبر الأنظمة الأساسية حقًا. ستتعامل هذه الأنظمة الأساسية مع المهمة الصعبة المتمثلة في محاذاة الخرائط المكانية من ملايين الأجهزة المختلفة، مما يؤدي إلى إنشاء توأم رقمي واحد مشترك للعالم الحقيقي.

تشير مجموعة هذه التقنيات إلى مستقبل ينفصل فيه الويب عن الشاشة ثنائية الأبعاد. سيصبح طبقة مكانية من المعلومات والترفيه والأداة المساعدة التي يمكننا التفاعل معها بشكل طبيعي داخل محيطنا المادي. المرتكزات الدائمة هي العنصر الأساسي والحاسم الذي يجعل هذه الرؤية ممكنة.

الخلاصة: ابدأ في بناء الويب الدائم اليوم

مرتكزات WebXR الدائمة هي أكثر من مجرد واجهة برمجة تطبيقات جديدة؛ إنها تمثل تحولًا أساسيًا في ما هو ممكن على الويب. إنها تمكن المطورين من إنشاء تطبيقات AR ذات الذاكرة والسياق والقيمة الدائمة. من تغيير كيفية تسوقنا وعملنا وتعلمنا إلى إنشاء أشكال جديدة من الفن والترفيه، فإن الإمكانات هائلة.

لم يكن حاجز الدخول أقل من ذلك من أي وقت مضى. باستخدام هاتف ذكي حديث ومتصفح ويب، يمكن للمطورين في أي مكان في العالم البدء في تجربة إنشاء تجارب دائمة وواعية بالعالم. الرحلة نحو الويب المكاني الغامر حقًا جارية، ويتم بناؤها على معايير مفتوحة، ويمكن الوصول إليها للجميع. حان وقت البدء في البناء الآن.